<template>
	<el-dialog
		:title="title"
		class="dialog-share dialog"
		:visible.sync="dialog"
		width="680px"
		:before-close="cancel"
		:close-on-click-modal="false"
		:append-to-body="true"
	>
		<div class="dialog-content share-c">
			<el-form :model="fieldForm" :rules="fieldRules" ref="dialogForm" label-width="100px">
				<el-tabs v-model="filedTabsName" @tab-click="handleClick">
					<el-tab-pane label="字段配置" name="filedData">
						<el-form-item label="字段标题：" prop="columnLabel">
							<el-input v-model="fieldForm.columnLabel" type="text" maxlength="40" placeholder="请输入字段标题" size="small"></el-input>
						</el-form-item>
						<el-form-item label="字段代码：" prop="columnName">
							<el-input v-model="fieldForm.columnName" type="text" maxlength="40" placeholder="请输入字段代码" size="small"></el-input>
						</el-form-item>
						<el-form-item label="页面代码：" prop="fieldName">
							<el-input v-model="fieldForm.fieldName" type="text" maxlength="40" placeholder="请输入属性名" size="small"></el-input>
						</el-form-item>
						<el-form-item label="数据字典：">
							<el-input v-model="fieldForm.dictType" type="text" placeholder="请输入字段字典编码" size="small"></el-input>
						</el-form-item>
						<el-form-item label="是否缩略图：" prop="isImage">
							<el-switch
								v-model="fieldForm.isImage"
								active-color="false"
								inactive-color="true">
							</el-switch>
						</el-form-item>
					</el-tab-pane>
					<el-tab-pane label="代码配置" name="filedStyle">
						<el-form-item label="宽度：" prop="width">
							<el-input v-model="fieldForm.width" type="text" maxlength="40" placeholder="请输入宽度" size="small"></el-input>
						</el-form-item>
						<el-form-item label="文本对齐:" prop="rowPosition">
							<el-radio-group v-model="fieldForm.rowPosition">
								<el-radio label="left">左</el-radio>
								<el-radio label="center">中</el-radio>
								<el-radio label="right">右</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-row>
							<el-form-item label="JS执行方式:" prop="jsMethod">
								<el-radio-group v-model="fieldForm.jsMethod" v-for="(item, index) in fieldMethod" :key="index">
									<el-radio :label="item.value">{{ item.name }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-row>
						<el-form-item label="JS代码：" prop="jsCode">
							<codemirror ref="myCm" v-model="fieldForm.jsCode" :value="fieldForm.jsCode" @blur="codeChange($event)" :options="cmOptions"></codemirror>
							<!-- <el-input v-model="fieldForm.jsCode" type="textarea" :autosize="{ minRows: 5, maxRows: 7}" placeholder="请输入JS代码" size="small"></el-input> -->
							<el-link href="https://www.yuque.com/docs/share/e18aef47-0036-4471-8812-a12526205501?# 《jsCode用法》" target="_blank">jsCode配置文档</el-link>
						</el-form-item>
					</el-tab-pane>
					<el-tab-pane label="页面配置" name="pageData">
						<el-form-item label="">
							<el-button type="primary" @click="copyBtnData">导入按钮参数</el-button>
							<span class="tips">填入页面id，即代表此字段可以点击弹出页面</span>
						</el-form-item>
						<el-form-item label="页面名称：">
							<el-input v-model="fieldForm.openPageName" type="text" size="small" placeholder="请输入打开页面的名称"></el-input>
						</el-form-item>
						<el-row v-if="fieldForm.sysPageShow === 'refresh'">
							<el-col :span="24">
								<el-form-item label="展示方式：" prop="sysPageShow">
									<el-radio-group v-model="fieldForm.sysPageShow" v-for="(item, index) in configs.sysPageShows" :key="index">
										<el-radio :label="item.dictValue">{{ item.dictLabel }}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="请求API：" v-if="fieldForm.sysPageShow === 'refresh'">
							<el-row>
								<el-col :span="6">
									<el-select v-model="fieldForm.btnSubmitMethod" clearable placeholder="选择请求方式" size="small" style="width: 100%">
										<el-option v-for="(item, index) in configs.sysUrlMethods" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
									</el-select>
								</el-col>
								<!-- v-if="pageTypeArry.includes(pageType)" -->
								<el-col :span="6">
									<el-form-item label="">
										<el-select v-model="fieldForm.btnSubmitGateway" clearable placeholder="选择网关" size="small" style="width: 100%">
											<el-option v-for="(item, index) in apiGatewayDict" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-input v-model="fieldForm.btnSubmitUrl" type="text" maxlength="120" size="small" placeholder="请输入提交API"
									></el-input>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item label="传入参数：" v-if="fieldForm.sysPageShow !== 'refresh'">
							<el-input v-model="fieldForm.openPagePara" type="text" size="small" placeholder="如:pageId={id}&name={name}"></el-input>
						</el-form-item>
						<el-row v-if="fieldForm.sysPageShow !== 'refresh'">
							<el-col :span="12">
								<el-form-item label="页面类型：" prop="sysPageType">
									<el-select v-model="fieldForm.sysPageType" placeholder="请选择页面类型" size="small">
										<el-option
											v-for="item in configs.sysPageTypes"
											:key="item.dictValue"
											:label="item.dictLabel"
											:value="item.dictValue">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="页面ID：" prop="openPageId">
									<el-input v-model="fieldForm.openPageId" type="text" size="small" placeholder="请输入页面Id"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="编辑配置" name="editData">
						<el-form-item label="选择组件：" prop="component">
							<el-select  
							v-model="fieldForm.component" clearable placeholder="请选择">
								<el-option
									v-for="item in filedComponent"
									:key="item.componentValue"
									:label="item.componentName"
									:value="item.componentValue">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="默认值：">
							<el-input v-model="fieldForm.defaultValue" type="text" placeholder="" size="small"></el-input>
						</el-form-item>
						<el-form-item label="是否必填：" prop="required">
							<el-radio-group v-model="fieldForm.required" v-for="(item, index) in requiredDict" :key="index">
								<el-radio :label="item.value">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="添加可编辑：" prop="oldDataFlag">
							<el-radio-group v-model="fieldForm.oldDataFlag" v-for="(item, index) in oldDataDict" :key="index">
								<el-radio :label="item.value">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="显示条件：" prop="showPara">
							<el-input v-model="fieldForm.showPara" type="text" size="small" placeholder="请输入显示条件"></el-input>
						</el-form-item>
						<el-form-item label="数据方式：" prop="sysQueryMethod" v-if="isDataArray.includes(fieldForm.component)">
							<el-select v-model="fieldForm.dataType" placeholder="请选择数据方式" size="small" clearable style="width: 100%" @change="dataTypeSelect">
								<el-option v-for="(item, index) in dataType" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<span v-if="isDataArray.includes(fieldForm.component)">
							<el-row v-if="fieldForm.dataType === 'dataApi'" label="数据接口：">
								<el-form-item label="是否自动加载">
									<el-radio-group v-model="fieldForm.autoLoad" v-for="(item, index) in autoRequestDict" :key="index">
										<el-radio :label="item.value">{{ item.label }}</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="请求行数据">
									<div class="requestRowsCode">
										<codemirror ref="myCmB" v-model="fieldForm.requestData" :value="fieldForm.requestData" @blur="codeChangeData($event)" :options="requestOptions"></codemirror>
									</div>
									<!-- <el-input v-model="fieldForm.requestData" type="textarea" :rows="5" size="small" placeholder="请输入请求行数据"></el-input> -->
									<el-link href="https://bl90ze.yuque.com/g/mqut74/gr1lt7/piq60yirvg5srkmz/collaborator/join?token=9aIU52d6LwH2Tsd2# 《表格单行提交数据JSON规范》" target="_blank">点击查看表格单行请求数据JSON规范</el-link>
								</el-form-item>
								<el-form-item label="">
									<el-col :span="24">
										<el-col :span="6">
											<el-select v-model="fieldForm.dataRequestMethod" placeholder="选择请求方式" clearable size="small" style="width: 100%">
												<el-option v-for="(item, index) in configs.sysUrlMethods" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
											</el-select>
										</el-col>
										<el-col :span="6">
											<el-select v-model="fieldForm.dataRequestGateway" placeholder="选择网关" clearable size="small" style="width: 100%">
												<el-option v-for="(item, index) in apiGatewayDict" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
											</el-select>
										</el-col>
										<el-col :span="12">
											<el-input v-model="fieldForm.dataApi" type="text" placeholder="请输入接口" size="small"></el-input>
										</el-col>
										<el-col :span="12">
											<el-input v-model="fieldForm.dataRequestLabel" type="text" placeholder="请输入标签名" size="small"></el-input>
										</el-col>
										<el-col :span="12">
											<el-input v-model="fieldForm.dataRequestValue" type="text" placeholder="请输入标签值" size="small"></el-input>
										</el-col>
									</el-col>
								</el-form-item>
							</el-row>
							<!-- <el-form-item v-if="fieldForm.dataType === 'dict'" label="数据字典：">
								<el-input v-model="fieldForm.dictType" type="text" placeholder="请输入字段字典编码" size="small"></el-input>
							</el-form-item> -->
						</span>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancel(false)">取消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确定</el-button>
		</div>
		
		<fieldBtnForm :copyBtnDialog="copyBtnDialog" v-if="copyBtnDialog" :designPageJson="designPageJson" @close="closeCopyBtn"></fieldBtnForm>
	</el-dialog>
</template>

<script>
import fieldBtnForm from './fieldBtnForm'	
import { codemirror } from 'vue-codemirror' // 引入组件
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-dark.css' //主题
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/addon/lint/json-lint'

// 折叠
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/comment-fold';

export default {
  name: 'filedForm',
  components: {
	fieldBtnForm,
	codemirror
  },
  props: {
    dialog: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: ''
	},
	designPageJson: {
		type: Object,
		default: () => {}
	},
	info: {
		type: Object,
		default: () => {}
	},
	apiGatewayDict: {
		type: Array,
		default: () => []
	}
  },
  data() {
	return {
		fieldFormData: '',
		hasPageForm: null,
		fieldForm: {
			id: '',
			columnLabel: '',
			columnName: '',
			fieldName: '',
			jsCode: "",
			dictType: '',
			orderFlag: "N",
			showFlag: 'Y',
			width: "",
			rowPosition: "left",
			sysPageType: '',
			openPageId: '',
			openPagePara: '',
			openPageName: '',
			sysPageShow: '',
			btnSubmitGateway: '',
			btnSubmitUrl: '',
			btnSubmitMethod: '',
			oldDataFlag: "N",
			defaultValue: '',
			required: false,
			autoLoad: false,
			requestData: '',
			showPara: '',
		},
		configs: this.designPageJson.btnConfig,
		fieldRules: {
			columnLabel: [{ required: true, message: "请输入字段标题", trigger: "blur" }],
			columnName:  [{ required: true, message: "请输入字段代码", trigger: "blur" }],
			fieldName:  [{ required: true, message: "请输入页面代码", trigger: "blur" }],
			sysQueryMethod:  [{ required: true, message: "请选择条件设置", trigger: "blur" }]
		},
		dictOption: this.designPageJson.pageDict,
		filedTabsName: 'filedData',
		copyBtnDialog: false,
		filedComponent: [
			{ componentName: '输入框', componentValue: 'elCodeInput' },
			{ componentName: '下拉框', componentValue: 'elCodeSelect' },
			{ componentName: '多选下拉框', componentValue: 'elCodeMultiSelect' },
			{ componentName: '数字输入框', componentValue: 'elCodeInputNumber' },
			{ componentName: '普通文本', componentValue: 'elCodeText' },
		],
		fieldMethod: [{name:'页面加载自动执行',value:'auto'},{name:'点击事件执行',value:'event'},{name:'blur事件执行',value:'blur'}],
		dataType: [{label: '数据字典', value: 'dict'}, {label: '数据接口', value: 'dataApi'}],
		oldDataDict: [{label: '是', value: 'Y'}, {label: '否', value: 'N'}],
		requiredDict:[{label: '是', value: true}, {label: '否', value: false}],
		autoRequestDict:[{label: '是', value: true}, {label: '否', value: false}],
		isDataArray: ['elCodeSelect', 'elCodeMultiSelect'],
		cmOptions: {
			tabSize: 2,
			autoRefresh: true,
			mode: "text/javascript",
			theme: "base16-dark",
			lineNumbers: true,
			htmlMode: true,
			line: true,
			autoCloseBrackets: true,
			extraKeys: { Ctrl: "autocomplete" },
			readOnly: false,
			foldGutter: true,
			lineWrapping: true,
			gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
		},
		requestOptions: {
			tabSize: 4,
			autoRefresh: true,
			mode: "application/json",
			theme: "default",
			lineNumbers: true,
			line: true,
			autoCloseBrackets: true,
			showCursorWhenSelecting: true,
			readOnly: false,
			foldGutter: true,
			lineWrapping: true,
			gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
		},
	}
  },
  created() {
		if (this.info) {
			this.fieldForm = this.info
		}
		// console.log(this.info)
  },
  methods: {
	// 导入按钮参数
	copyBtnData() {
		this.copyBtnDialog = true
	},
	// 关闭按钮参数
	closeCopyBtn(flag, data) {
		console.log(flag, data)
		flag = typeof flag !== "boolean" ? false : flag;
		if (flag) {
			const { sysPageType, openPageId, openPagePara, sysPageShow, btnSubmitGateway, btnSubmitUrl, btnSubmitMethod } = data;
			this.fieldForm.sysPageType = sysPageType;
			this.fieldForm.openPageId = openPageId;
			this.fieldForm.openPagePara = openPagePara;
			this.fieldForm.sysPageShow = sysPageShow
			this.fieldForm.btnSubmitGateway = btnSubmitGateway
			this.fieldForm.btnSubmitUrl = btnSubmitUrl
			this.fieldForm.btnSubmitMethod = btnSubmitMethod
		}
		
		this.copyBtnDialog = false
	},
	// js代码赋值
	codeChange(e){
		const val = e.getValue()
		this.fieldForm.jsCode = val
		// this.pageShowJson = JSON.parse(val)
	},
	codeChangeData(e) {
		const val = e.getValue();
		const jsonValue = val !== '' ? JSON.stringify(JSON.parse(val), null, 2) : val;
		this.fieldForm.requestData = jsonValue
	},
	// 切换标签页
	handleClick() {
		if (this.filedTabsName === 'filedStyle') {
			this.$nextTick(()=> {
				this.$refs.myCm.codemirror.focus();
				this.$refs.myCm.codemirror.refresh()
			})
		}
		if (this.filedTabsName === 'editData') {
			this.$nextTick(()=> {
				if (this.$refs.myCmB) {
					this.$refs.myCmB.codemirror.focus();
					this.$refs.myCmB.codemirror.refresh()
				}
				
			})
		}
	},
	dataTypeSelect(e) {
		if (e === 'dataApi') {
			this.$nextTick(()=> {
				this.$refs.myCmB.codemirror.focus();
				this.$refs.myCmB.codemirror.refresh()
			})
		}
	},
	submitForm() {
		this.cancel(true, this.fieldForm)
	},
	cancel(flag, data) { 
		this.copyBtnDialog = false
		this.$emit('fieldClose', flag, data)
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import '../fonts/TableMaking.css';
	.requestRowsCode {
		height: 100px;
	}
	.dialog-share .el-radio:last-child{
		margin-right: 20px !important;
	}
	
	.tips {
		margin-left: 15px;
	}
	
</style>

<style>
	.requestRowsCode .CodeMirror {
		height: 100px
	}
</style>
